;(function (window) {

  Array.prototype.splitInToTwoimensionalArray = function(subArrayNum){
    var dataArr = new Array(Math.ceil(this.length / subArrayNum));
    for(let i = 0; i < dataArr.length;i++) {
      dataArr[i] = new Array();
    }
    for(let i = 0; i < this.length;i++) {
      dataArr[parseInt(i / subArrayNum)][i % subArrayNum] = this[i];
    }
    return dataArr
  }


  const hlCheckboxButton = {
    template:`<div class="hl-checkbox-button-container" >
    <ul class="hl-merge-checkbox-button"
      v-if="merge"
    >
      <li
        class="item"
        :style="{
          'height':buttonHeight + 'px',
          'lineHeight':buttonHeight + 'px',
          'width': buttonWidth
        }"
        :class="{'active':selectedData.indexOf(item.code) > -1}"
        v-for="(item,index) in data"
        @click="handleClick(item,index)"
      >
        {{item.name}}
        <i class="number" v-show="item.num || item.num == 0 ">({{item.num}})</i>
      </li>
    </ul>

    <div class="hl-seperate-checkbox-button" v-if="!merge">
      <ul class="flex-row"
          :style="{'justifyContent':justifyContent}"
          v-for="(item,index) in flexData"
      >
        <li
          class="item"
          :style="{
            'height':buttonHeight + 'px',
            'lineHeight':buttonHeight + 'px',
            'width': buttonWidth,
          }"
          :class="{
            'active':selectedData.indexOf(item1.code) > -1,
          }"
          v-for="(item1,index1) in item"
          @click="handleClick(item1,index1)"
        >
          {{ item1.name}}
          <i class="number" v-show="item1.num || item1.num == 0">({{item1.num}})</i>
        </li>
      </ul>
      </div>
    </div>`,
    data(){
      return {

      }
    },
    model:{
      prop: 'selected',
      event:'on-select-item'
    },
    props:{
      data:{
        type:Array,
        default:() => []
      },
      width: {
        type:[ Number,String ],
        default: 'auto'
      },
      height: {
        type:[ Number,String ],
        default: 34
      },
      selected:{
        type:Array,
        default:() => []
      },
      flex:{
        type:Number,
        default:0
      },
      justifyContent:{
        type:String,
        default:'space-between'
      },
      merge: Boolean,
      inline: Boolean
    },
    computed:{
      checkboxButtonWrapInline(){
        return this.inline
      },
      buttonHeight(){
        return this.height - 2
      },
      buttonDisabled(){
        return this.disabled
      },
      buttonWidth(){
        if(this.width == 'auto') return this.width
        return this.width + 'px'
      },
      selectedData(){
        return this.selected
      },
      flexData(){
        if(this.flex) return this.data.splitInToTwoimensionalArray(this.flex)
        return []
      }
    },
    methods:{
      handleClick(item,index){
        const { code } = item
        const positonIndex = this.selectedData.indexOf(code)

        if(positonIndex > -1){
          this.selectedData.splice(positonIndex,1)
        }else{
          this.selectedData.push(code)
        }

        // 吐出所有选中的数据
        let allSelectedData = []
        this.data.forEach((el,i) => {
          if(this.selectedData.indexOf(el.code) > -1) allSelectedData.push(el)
        })

        this.$emit('on-select-item',this.selectedData)
        this.$emit('on-click',allSelectedData,event,item)
      }


    }
  }

  Vue.component('hl-checkbox-button',hlCheckboxButton)

} (window))
